<template>
    <div class="center-point">
        <div class="head">我的积分</div>
        <div class="card">
            <div class="data">
                <div class="data-left">
                    <img src="@/assets/img/qianbao-bai.png" alt="">
                    <div class="data-left-text">
                        <p class="data-left-name">我的积分</p>
                        <p>点赞得积分，积分线下换好物</p>
                    </div>
                </div>
                <div class="data-right">
                    {{ user_info.jifen }}
                </div>
            </div>
            <div class="tab">
                <div class="tab-item" @click="selectTabFun(item, index)" :class="{ 'tab-item-active': tabCurrent == index }" v-for="(item, index) in tabList" :key="index">{{ item.name }}</div>
            </div>
            
            <div class="list">
                <div class="item" v-for="(item,index) in list" :key="index">
                    <div class="item-left">
                        <img v-if="item.type == 1"  src="@/assets/img/qianbao-lan.png" alt="">
                        <img v-else src="@/assets/img/qianbao-cheng.png" alt="">
                        <div class="item-left-content">
                            <div>{{ item.title }}</div>
                            <div class="item-left-text">时间：{{ item.created_at }}</div>
                        </div>
                    </div>
                    <div class="item-right">
                        <span v-if="item.type == 1">+{{ item.jifen }}</span>
                        <span v-else style="color: #FE6C24;">-{{ item.jifen }}</span>
                    </div>
                </div>
            </div>
            <div class="pagination">
                <el-pagination background layout="prev, pager, next" :total="total" @current-change="currentPageFun">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import {getMyUserJiFen} from '@/api/point'
import { mapState } from 'vuex'
export default {
    components: {

    },
    data() {
        return {
            tabList: [{ name: '全部',id:0 }, { name: '收入',id:1 }, { name: '支出' ,id:2}],
            tabCurrent: 0,
            total:0,
            params: {
                page: 1,
                limit: 10,
            },
            list: []
        };
    },
    computed: {
        ...mapState(['user_info'])
    },
    created() {
        this.getListFun()
    },
    methods: {
        selectTabFun(item, index) {
            this.tabCurrent = index;
            this.params.page = 1
            this.getListFun()
            // console.log(item,index)
        },
        currentPageFun(page) {
            this.params.page = page;
            this.getListFun();
            // console.log(item,index)
        },
        getListFun(){
            let item = this.tabList[this.tabCurrent]
            getMyUserJiFen({...this.params,type:item.id}).then(res=>{
                if(res.code == 200){
                    this.list = res.data.list   
                    this.total = res.data.count
                }
            })
        },
    }
}
</script>

<style lang="less" scoped>
.center-point {

    .card {
        width: 100%;
        box-sizing: border-box;
        background: #fff;
        box-shadow: 0px 0px 0.15rem 0.0125rem rgba(0, 0, 0, 0.08);
        padding: 0.5rem;
        box-sizing: border-box;
        .data{
            display: flex;
            justify-content: space-between;
            height: 1.3625rem;
            background: linear-gradient(61deg, #4F8AF8 0%, #679CFF 100%);
            border-radius: 0.15rem;
            box-sizing: border-box;
            padding: 0 0.5rem;
            .data-left{
                display: flex;
                align-items: center;
                img{
                    width: 0.4rem;
                    height: 0.325rem;
                    margin-right: 0.35rem;
                }
                .data-left-text{
                    color: #fff;
                    p{
                        margin: 0;
                        font-size: 0.15rem;
                        color: #fff;
                    }
                    .data-left-name{
                        font-size: 0.25rem;
                        margin-bottom: 0.125rem;
                    }
                }
            }
            .data-right{
                display: flex;
                align-items: center;
                font-size: 0.45rem;
                color: #fff;
            }
        }

        .tab {
            display: flex;
            width: 100%;
            height: 0.9rem;
            overflow-x: scroll;
            &::-webkit-scrollbar {
                height: 0;
                border-radius: 0.025rem;
                background: rgba(0, 0, 0, 0.1);
            }
            &::-webkit-scrollbar-thumb {
                background: #4f8af8;
            }

            .tab-item {
                position: relative;
                font-size: 0.175rem;
                color: #333;
                padding: 0 0.375rem;
                line-height: 0.9rem;
                cursor: pointer;
                user-select: none;
            }

            .tab-item-active {
                color: #4F8AF8;
                font-weight: 800;
                &::after {
                    content: '';
                    display: block;
                    width: 0.4rem;
                    height: 0.025rem;
                    background: #4F8AF8;
                    position: absolute;
                    bottom: 0.1875rem;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }

        .pagination {
            display: flex;
            justify-content: center;
            padding: 0.375rem  1rem;
        }

        .list {
           border: 0.0125rem solid #E5E5E5;
           border-bottom: 0;
            .item{
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 1.175rem;
                padding: 0 0.5rem;
                border-bottom: 0.0125rem solid #E5E5E5;
                .item-left{
                    display: flex;
                    align-items: center;
                    img{
                        width: 0.4rem;
                        height: 0.325rem;
                        margin-right: 0.4rem;
                    }
                    .item-left-content{
                        font-size: 0.175rem;
                        color: #333333;
                        .item-left-text{
                            font-size: 0.175rem;
                            color: #999;
                            padding-top: 0.1rem;
                        }
                    }
                }
                .item-right{
                    font-size: 0.3rem;
                    color: #4F8AF8;
                    font-weight: 800;
                }
            }

        }
    }
}
</style>